<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-04-03 11:18:58
-->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '设备监控',
    disableScroll: false,
  },
}
</route>
<template>
  <view class="detail">
    <gc-formHeard title="设备监控" :status="1" tips="浙江省杭州市余杭区文一西路与水城北路交汇处" />
    <view class="detailBox">
      <uv-sticky bgColor="#fff">
        <view class="relative">
          <uv-tabs
            :list="list"
            :current="current"
            @click="changeTab"
            :activeStyle="activeStyle"
            :inactiveStyle="inactiveStyle"
          ></uv-tabs>
          <view class="rightBtn">
            <uv-button
              type="primary"
              :color="`linear-gradient(-33deg, ${themeColor}, #329AFB)`"
              shape="circle"
              text="设备详情"
              :customStyle="{ width: '200rpx', height: '56rpx' }"
              @click="toDetail"
            >
              设备详情<uv-icon name="arrow-right" color="#fff" :size="16"
            /></uv-button>
          </view>
        </view>
      </uv-sticky>
      <view class="mt-4">
        <gc-overview v-if="current === 0" :themeColor="themeColor" />
        <gc-battery v-if="current === 1" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts" name="energyStorage">
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
import { useThemeStore } from '@/store'
const themeConfig = useThemeStore()
onPageScroll(({ scrollTop }) => {})
const current = ref(0)
const toDetail = () => {
  uni.navigateTo({ url: '/pages/device/contentDetail' })
}
const { themeColor } = themeConfig.themeConfig
const activeStyle = {
  color: themeColor,
  fontWeight: 'bold',
  transform: 'scale(1.05)',
}
const inactiveStyle = {
  color: '#354970',
  transform: 'scale(1)',
}
const changeTab = (e) => {
  console.log(e, 333)
  const { index } = e
  current.value = index
}
const list = [
  {
    name: '系统总览',
  },
  {
    name: '电池',
  },
]
onMounted(() => {})
</script>

<style scoped lang="scss">
.detail {
  .detailBox {
    position: relative;
    z-index: 2;
    min-height: 100px;
    padding: 20rpx 30rpx 160rpx;
    margin-top: -15px;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;

    :deep(.uv-tabs__wrapper__nav) {
      border-bottom: 1px solid #eee;
    }

    :deep(.uv-tabs__wrapper__nav__line) {
      bottom: -1px !important;
      background: #226cff !important;
    }

    .rightBtn {
      position: absolute;
      top: 16rpx;
      right: 0;
      z-index: 971;
    }
  }
}
</style>
